<template>
  <div class="lg:gap-6 flex flex-col gap-3" v-if="!!cards.length">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.hotDirectCharge') }}
      </h2>
    </div>
    <div class="lg:gap-8 max-lg:overflow-x-auto max-lg:flex-nowrap max-lg:flex lg:grid-cols-7 grid grid-cols-1 gap-3">
      <nuxt-link
        :prefetch="false"
        :to="localePath(`/top-up/${i.code}`)"
        v-for="(i, k) in cards"
        :key="k"
        class="flex gap-2 border group hover:shadow-md overflow-hidden duration-400 transition-all relative rounded-[16px] cursor-pointer max-lg:w-1/3 max-lg:flex-none"
        :style="'background-image: url(' + $globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_3_4') + ')'"
      >
        <div class="absolute inset-0 size-full rounded-[1rem] backdrop-blur-[2.5rem] z-20 [background: rgba(255,255,255,0.5)]"></div>
        <div class="bg-black/20 size-full flex flex-col gap-2 p-4">
          <div class="aspect-square rounded-[8px] flex-none overflow-hidden z-40">
            <img
              :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_1_1')"
              :alt="i?.goods_name || ''"
              :title="i?.goods_name || ''"
              class="group-hover:scale-110 size-full object-cover transition-all duration-300"
            />
          </div>
          <div class="flex z-40 flex-col justify-around bg-transparent">
            <h3 class="font-medium text-[12px] text-white line-clamp-2 text-center">
              {{ i?.goods_name || '' }}
            </h3>
            <div v-if="0" class="font-medium text-[12px] text-white/50 line-clamp-2">
              {{ i?.region?.name || '' }}
            </div>
          </div>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HotDirectCharge',
    props: {
      cards: {
        type: Array,
        default: () => []
      }
    }
  }
</script>
